import React, { useState } from 'react'


import { StarOutline, FileOutline, UserOutline, ReceiptOutline, InformationCircleOutline, TextDeletionOutline, TeamOutline } from 'antd-mobile-icons'

import '@/assets/css/user.css'

import Menu from '@/components/Common/Menu'

const Index = () => {
    
    const business = React.Business
    // console.log(business);
    let [order, SetOrder] = React.useState({
        all: 0,
        wait: 0,
        comment: 0,
        depot: 0
    })

    React.useEffect(() => {
        OrderData()
    },[])

    const OrderData = async () => {
        var result = await React.HTTP.post('/business/order',{busid:React.Business.id})

        if(result.code == 0){
            return false
        }else{
            // console.log(result.data)
            SetOrder(result.data)
        }
    }

    return (
        <>
            <div className="top">
                <div>个人中心</div>
            </div>
            {/* 头部 */}
            <div className="header">
                <div className="userinfo">
                    <div className="avatar">
                        <img src={business.avatar_text} alt="" />
                    </div>
                    <div className="nickname">{business.nickname}</div>
                    
                </div>
                <div className="corrugated">
                    <div className="wave-top wave-item"></div>
                    <div className="wave-middle wave-item"></div>
                    <div className="wave-bottom wave-item"></div>
                </div>
            </div>
            <div className="menu-center">
                <div className="item">
                    <div>{order.all}</div>
                    <div className="text">全部订单</div>
                </div>
                <div className="item">
                    <div>{order.wait}</div>
                    <div className="text">待入住</div>
                </div>
                <div className="item">
                    <div>{order.comment}</div>
                    <div className="text">待评论</div>
                </div>
                <div className="item">
                    <div>{order.depot}</div>
                    <div className="text">售后</div>
                </div>
            </div>
            <React.UI.List>
                <React.UI.List.Item prefix={<FileOutline />} onClick={() => { React.navigate('/business/order') }}>
                    房间订单
                </React.UI.List.Item>
                <React.UI.List.Item prefix={<StarOutline />} onClick={() => { React.navigate('/business/collect') }}>
                    我的收藏
                </React.UI.List.Item>
                <React.UI.List.Item prefix={<UserOutline />} onClick={() => { React.navigate('/business/profile') }}>
                    个人资料
                </React.UI.List.Item>
                <React.UI.List.Item prefix={<TeamOutline />} onClick={() => { React.navigate('/guest/index') }}>
                    住客信息
                </React.UI.List.Item>
                <React.UI.List.Item prefix={<ReceiptOutline />} onClick={() => { React.navigate('/business/coupon') }}>
                    我的优惠券
                </React.UI.List.Item>
                <React.UI.List.Item prefix={<TextDeletionOutline />}    onClick={async () => {
                    const result = await React.UI.Dialog.confirm({
                    content: '是否退出登录',
                })
                if (result) {
                    React.Cookie.remove('business')
                    React.navigate('/business/login')
                }
            }}
                >
                    退出登录
                </React.UI.List.Item>
                
            </React.UI.List>

            <Menu />
        </>
    )
}

export default Index;